.list {
  &-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    &-thumb {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 310rpx;
      image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: $border-radius;
      }
    }

    &-content {
      position: relative;
      z-index: 1;
      padding: $padding;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-title {
    }
    &-desc {
      color: $color-gray-dark;
      font-size: 24rpx;
    }

    &-tag {
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      font-size: 24rpx;
      padding: 5rpx 10rpx;
      border-radius: 0 $border-radius 0 $border-radius;
      background-color: $color-primary;
      color: $color-white;
    }
  }
}

.more {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5rpx 20rpx;
  font-size: 24rpx;
  color: $uni-secondary-color;
  background-color: $uni-white;
  border-radius: $border-radius;
  border: $border;
}

.thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $padding * 0.5;
  &-logo {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
      border: $border;
      border-radius: $border-radius-lg;
    }
  }
  &-name {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #333;
  }
}

.topic {
  &-item {
    padding: $padding 0;
    border-top: $border;
    border-bottom: $border;

    &-wrapper {
      display: flex;
      justify-content: flex-start;
    }
    &-left {
      flex: 0 0 50rpx;
      margin-right: $padding;
    }
    &-right {
      flex: 1 1 auto;
    }
    &-user {
      color: $color-primary;
      font-weight: 600;
    }

    &-content {
      line-height: 1.5;
      margin-top: 20rpx;
    }

    &-images {
      margin-top: 20rpx;
    }
    &-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      @extend .text-gray-light;
    }

    .photo {
      width: 100%;
      height: 100%;
      border: $border;
      box-sizing: border-box;
    }
  }

  &-comments {
    background-color: rgba($color: #000000, $alpha: 0.03);
    margin-top: 20rpx;
    padding: $padding;
    border-radius: $border-radius;

    &-item {
      display: flex;
      justify-content: flex-start;

      & + & {
        margin-top: 20rpx;
      }

      &-avatar {
        margin-right: 10rpx;
        flex: 0 0 50rpx;
      }

      &-right {
        flex: 1 1 auto;
      }

      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      &-user {
        color: $color-secondary;
        font-weight: 600;
        flex: 1 1 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 10rpx;
      }

      &-time {
        flex: 1 1 50%;
        text-align: right;
        @extend .text-gray-light;
        @extend .text-small;
      }

      &-content {
        line-height: 1.5;
      }
    }
    &-replay {
      display: inline-block;
    }
    .rich-text {
      display: inline-block;
    }
  }
}
